Created:01/12/2019
By: TeamXcel
Thank you for purchasing our theme. If you have any questions that are beyond the scope of this help file, please contact our support. Thanks so much!
Below is the general HTML structure of the landing page.
The template page's layout consist of top that show the logo and main menu, hero section that show background image, beforecontent that show some amaizing content, about section contain about your some info & feature, service section contained all services, work section you can showcase your portfolio with awesome animation, skills section here you can add some skills, team section is for your team members, testimonial section here you can published your customer reviews, call to action this for call to action content, contact section here you can put your contact information & footer that show copyright information.
<!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang=""> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang=""> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang=""> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Saas startup html template">
<meta name="author" content="TeamXcel">
<title>Saasx | Saas startup html template</title>
<link rel="shortcut icon" type="image/x-icon" href="img/favicon.png">
<!-- Font Awesome CSS -->
<link rel="stylesheet" href="css/fontawesome.min.css">
<!-- Themify Icons CSS -->
<link rel="stylesheet" href="css/themify-icons.css">
<!-- Elegant Icons CSS -->
<link rel="stylesheet" href="css/elegant-font-icons.css">
<!-- animate CSS -->
<link rel="stylesheet" href="css/animate.min.css">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- Slicknav CSS -->
<link rel="stylesheet" href="css/slicknav.min.css">
<!-- Venobox CSS -->
<link rel="stylesheet" href="css/venobox/venobox.css">
<!-- OWL-Carousel CSS -->
<link rel="stylesheet" href="css/owl.carousel.css">
<!-- Main CSS -->
<link rel="stylesheet" href="css/main.css">
<!-- Responsive CSS -->
<link rel="stylesheet" href="css/responsive.css">
<script src="js/vendor/modernizr-2.8.3-respond-1.4.2.min.js"></script>
</head>
<body data-spy="scroll" data-target="#navmenu" data-offset="70">
<!--[if lt IE 8]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<div class="site-preloader-wrap">
<div class="spinner"></div>
</div><!-- Preloader -->
<header id="header" class="header-section">
</header> <!--.header-section -->
<div class="header-height"></div>
<section class="hero-section bg-grey padding">
</section><!--./hero-section-->
<section class="feature-section padding">
</section><!--./feature-section-->
<section class="counter-section bg-grey padding">
</section><!--./counter-section-->
<section class="contant-section">
</section><!--./contant-section-->
<section class="pricing-section bg-grey padding">
</section><!--./pricing-section-->
<section class="testimonial-section bg-grey padding">
</section><!--./testimonial-section-->
<section class="cta-section padding">
</section><!--./cta-section-->
<section class="blog-section padding">
</section><!--/.blog-section-->
<div class="sponsor-section bg-grey">
</div><!--/.sponsor-section-->
<section class="widget-section padding">
</section><!--/.widget-section-->
<footer class="footer-section align-center">
<div class="container">
<p>© 2019 Saasx Powered by TeamXcel</p>
</div>
</footer><!-- /.footer-section -->
<a data-scroll href="#header" id="scroll-to-top"><i class="arrow_carrot-up"></i></a>
<!-- jQuery Lib -->
<script src="js/vendor/jquery-1.12.4.min.js"></script>
<!-- Bootstrap JS -->
<script src="js/vendor/bootstrap.min.js"></script>
<!-- Tether JS -->
<script src="js/vendor/tether.min.js"></script>
<!-- Slicknav JS -->
<script src="js/vendor/jquery.slicknav.min.js"></script>
<!-- OWL-Carousel JS -->
<script src="js/vendor/owl.carousel.min.js"></script>
<!-- Smooth Scroll JS -->
<script src="js/vendor/smooth-scroll.min.js"></script>
<!-- Venobox JS -->
<script src="js/vendor/venobox.min.js"></script>
<!-- Ajaxchimp JS -->
<script src="js/vendor/jquery.ajaxchimp.min.js"></script>
<!--Counterup JS-->
<script src="js/vendor/jquery.counterup.min.js"></script>
<!--Waypoints JS-->
<script src="js/vendor/jquery.waypoints.v2.0.3.min.js"></script>
<!-- Wow JS -->
<script src="js/vendor/wow.min.js"></script>
<!-- Google Map JS -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCPH8h1UpcK01BdcvoZeOzq-_wJqRxN1Pc"></script>
<!-- Main JS -->
<script src="js/main.js"></script>
</body>
</html>
The site is made of many sections like header, slider, testimonials, services and more...
<header id="header" class="header-section"> <div class="container"> <nav class="navbar "> <a href="index.html" class="navbar-brand"><img src="img/logo-dark.png" alt="Saasx"></a> <div class="d-flex menu-wrap"> <div id="mainmenu" class="mainmenu"> <ul class="nav"> <li><a data-scroll class="nav-link active" href="index.html">Home<span class="sr-only">(current)</span></a> </li> <li><a href="about.html">About Us</a></li> <ul> <li><a href="projects.single.html">Projects Single</a></li> </ul> </li> </ul> </div> </div> </nav> </div> </header> <!--.header-section -->
<section class="hero-section bg-grey padding"> <div class="container"> <div class="hero-wrap row"> <div class="col-md-6"> <div class="hero-content"> <span>TECHNOLOGY WITH ARTIFICIAL INTELLIGENCE</span> <h2>Drive More Customers <br>Through Digital</h2> <p>Chap fantastic skive off chancer knees up starkers easy peasy up the <br>kyver David, bleeding the BBC tomfoolery chimney.!</p> <a href="#" class="default-btn">Try it Now</a> </div> </div> <div class="col-md-6"> <div class="hero-item"> <img src="img/SaaS-4.png" alt="img"> </div> </div> </div> </div> </section><!--./hero-section-->
<section class="feature-section padding"> <div class="container"> <div class="feature-wrap row"> <div class="col-md-6"> <div class="feature-content"> <div class="section-heading"> <span>Feature</span> <h2>Revolutionize your online <br>business today!</h2> </div> <p>The business carrent account that is your Accounting software. <br>A simple way to run your business</p> <div class="play-btn"> <i class="fa fa-play-circle"><span>Watch Video</span></i> </div> </div> </div> <div class="col-md-6"> <div class="row"> <div class="col-lg-6 padding-15"> <div class="feature-item"> <i class="ti-bar-chart"></i> <h3>Data Analytics</h3> <p>The business carrent account that is your Accounting software. A simple way to run your business</p> </div> </div>\ </div> </div> </div> </div> </section><!--./feature-section-->
<section class="counter-section bg-grey padding"> <div class="container"> <div class="counter-wrap row"> <div class="col-md-6"> <div class="section-heading"> <span>DO MORE WITH EMAUS</span> <h2>Over 1200+ completed <br>projects & still counting.</h2> <p>Use Emaus for free trial without the high costs. For the <br>big companies we offer premium features.</p> <div class="counter-content row"> <div class="col-lg-4 col-sm-6 padding-15"> <div class="counter-item"> <i class="ti-face-smile"></i> <h2 class="counter">345</h2> <h3>Happy Clients</h3> </div> </div> </div> </div> </div> <div class="col-md-6"> <div class="counter-img"> <img src="img/SaaS-1.png" alt="saas"> </div> </div> </div> </div> </section><!--./counter-section-->
<section class="contant-section"> <div class="contant-img d-none d-lg-block"></div> <div class="container"> <div class="contant-wrap"> <div class="col-lg-6 offset-lg-6"> <div class="contant-item"> <h2>A Straight Forward Structure for Powerful Results</h2> <p class="mb-15">Funding freemium technology focus equity bootstrapping usernce <br>niche market. Seed round agile development growth hacking retur <br>investment alpha.Marketing pitch gen scrum project.</p> <a href="#" class="default-btn">Get Started</a> </div> </div> </div> </div> </section><!--./contant-section-->
<section class="pricing-section bg-grey padding"> <div class="container"> <div class="pricing-wrappper row"> <div class="col-md-4"> <div class="section-heading"> <span>Smart Contacts</span> <h2>Best Results <br>& Reliability</h2> <p>Choose a suitable package for your website and <br>join innovative minds</p> </div> </div> <div class="col-md-8"> <div class="pricing-wrap row"> <div class="col-lg-6 padding-15"> <div class="pricing-box"> <div class="pricing-head"> <span>BEST CHOICE</span> <h3>$49<span>Monthly</span></h3> <h4>Basic Plan</h4> </div> <ul class="pricing-list"> <li>Power And Predictive Dialing</li> </ul> <div class="pricing-footer"> <a href="#" class="default-btn">Purchase Plan</a> </div> </div> </div> </div> </div> </div> </div> </section><!--./pricing-section-->
<section class="testimonial-section bg-grey padding"> <div class="container"> <div class="section-heading mb-40 text-center"> <span>Testimonial</span> <h2>Checkout what people <br>says about us!</h2> </div> <div id="testimonial-carousel" class="testimonial-carousel owl-carousel"> <div class="testi-item"> <p>"Thank you for guiding us through the construction process, understanding, and always ready to accommodate our needs. We love our new space and built by the very best!"</p> <h3>Kyle Frederick<span>Developer</span></h3> <img src="img/testi-1.jpg" alt="testi"> </div> </div> </div> </div> </section><!--./testimonial-section-->
<section class="cta-section padding"> <div class="container"> <div class="cta-content text-center"> <h2>Manage any Projects with SaasX</h2> <p>We combine practice of managing and analyzing project management to its full performance <br>and maximize its effectiveness and stay to of everything</p> <a href="#" class="default-btn">Start Free Trial</a> </div> </div> </section><!--./cta-section-->
<section class="blog-section padding"> <div class="container"> <div class="section-heading text-center mb-40"> <span>From Blog</span> <h2>Speciallized news</h2> </div><!--/.section-heading--> <div class="row blog-wrap"> <div class="col-lg-4 col-sm-6 sm-padding"> <div class="blog-item"> <div class="blog-thumb"> <img src="img/post-1.jpg" alt="post"> <span class="category"><a href="#">interior</a></span> </div> <div class="blog-content"> <h3><a href="#">Minimalist trending in modern architecture 2019</a></h3> <p>Building first evolved out dynamics between needs means available building materials attendant skills.</p> <a href="#" class="read-more">Read More</a> </div> </div> </div> </div> </div> </section><!--/.blog-section-->
<div class="sponsor-section bg-grey"> <div class="container"> <div id="sponsor-carousel" class="sponsor-carousel owl-carousel"> <div class="sponsor-item"> <img src="img/sponsor1.png" alt="sponsor"> </div> </div> </div> </div><!--/.sponsor-section-->
<section class="blog-section bg-grey bd-bottom padding"> <div class="container"> <div class="section-heading text-center mb-40"> <h2>Recent Stories</h2> <span class="heading-border"></span> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.<br> It has survived not only five centuries.</p> </div><!-- /Section Heading --> <div class="row"> <div class="col-lg-12 xs-padding"> <div class="blog-items grid-list row"> <div class="col-md-4 padding-15"> <div class="blog-post"> <img src="img/home-blog-1.jpg" alt="blog post"> <div class="blog-content"> <span class="date"><i class="fa fa-clock-o"></i> January 01.2018</span> <h3><a href="#">Standard gallery post</a></h3> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> <a href="#" class="post-meta">Read More</a> </div> </div> </div><!-- Post 1 --> </div> </div><!-- Blog Posts --> </div> </div> </section><!-- Blog Section -->
<footer class="footer-section align-center"> <div class="container"> <p>© 2019 Saasx Powered by TeamXcel</p> </div> </footer><!-- /.footer-section -->
These are the css files:
This theme use these Javascript files:
bootstrap.min.js
smooth-scroll.min.js
owl.carousel.min.js
jquery.ajaxchimp.min.js
jquery-1.12.4.min.js
jquery.mb.YTPlayer.min.js
owl.carousel.min.js
venobox.min.js
wow.min.js
jquery.counterup.min.js
main.js
You can edit the contact.js files. for setting contact form
There are only one php code for contact page which is contact.php, open this file and change the email and subject on line 24 and line 27. No need to edit other code unless you really want to.
Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist.
TeamXcel